<template>
  <div class="chrome" :class="[systemSettingStore.$state.deskAppRangeType]">
    <div class="chrome-header">
      <ul class="tabs-list" @mousedown.stop @dblclick.stop>
        <li
          class="pl14 pr14"
          v-for="(item, index) in viewList"
          :key="item.id"
          :class="{ checked: item.id === currentView?.id }"
          @click="handleCheck(item)"
        >
          <img :src="getImageUrl(`chrome/${item.icon.trim()}`)" alt="icon" />
          <p>{{ item.name }}</p>
          <span class="close" @click.stop="handleClose(item, index)">
            <i class="iconfont wos-close-wechat fs16" />
          </span>
        </li>
        <li class="add">
          <span @click.stop="handleAddView">
            <i class="iconfont wos-add fs12" />
          </span>
        </li>
      </ul>
      <system-child-btn />
    </div>
    <div class="tools" @mousedown.stop @dblclick.stop>
      <div class="tools-top">
        <span><i class="iconfont wos-to-left-line" /></span>
        <span><i class="iconfont wos-to-right-line" /></span>
        <span @click.stop="handleRefresh" class="ac">
          <i v-if="iframeLoading" class="iconfont wos-close" />
          <i v-else class="iconfont wos-refresh" />
        </span>
        <div class="search">
          <div class="lock"><i class="iconfont wos-lock" /></div>
          <input v-model="currentView.src" type="text" />
        </div>
      </div>
      <ul class="tools-bottom">
        <li v-for="item in bookmark" :key="item.name" @click="handleCheckBookmark(item)">
          <img :src="getImageUrl(`chrome/${item.icon.trim()}`)" alt="bookmark" />
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="chrome-content">
      <template v-for="item in viewList" :key="item.id">
        <loading v-if="!item.isLoaded" />
        <iframe
          v-show="item.isLoaded && currentView.src === item.src && /^http/.test(currentView.src)"
          :src="item.src"
          @load="iframeLoad(item)"
        />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import SystemChildBtn from '@/base/systemWindow/systemChildBtn.vue'
import { inject, onBeforeMount, reactive, ref } from 'vue'
import { getImageUrl, randomWord, sleep } from '@/utils/utils'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'

interface IBookmark {
  id?: string
  isLoaded?: boolean
  name: string
  icon: string
  src: string
}

const appId = inject<string>('appId')
const taskId = inject<string>('taskId')
const currentView = ref<IBookmark>({
  name: '',
  icon: '',
  src: ''
})
const iframeLoading = ref<boolean>(false)
const bookmark = reactive<IBookmark[]>([
  { name: 'FiveXu-UI-Plus', icon: 'fivexu-ui-plus.jpg', src: 'http://www.lianlian.fun:5985/#/layout/button' },
  { name: '个人简历', icon: 'resume.ico', src: 'http://www.lianlian.fun:5987/#/home' },
  { name: '自制小游戏', icon: 'game.ico', src: 'http://www.lianlian.fun:5986/#/sokoban' },
  { name: '哔哩哔哩 (゜-゜)つロ 干杯~-bilibili', icon: 'bilibili.ico', src: 'https://www.bilibili.com/' }
])
const viewList = ref<IBookmark[]>([])

const runningTasksStore = useRunningTasksStore()
const systemSettingStore = useSystemSettingStore()

const handleCheckBookmark = (data: IBookmark) => {
  const id = randomWord(20)
  const nullBookIndex = viewList.value.findIndex((item) => item.src === '')
  if (nullBookIndex >= 0) {
    viewList.value[nullBookIndex] = { ...data, id, isLoaded: false }
  } else {
    viewList.value.push({ ...data, id, isLoaded: false })
  }
  handleCheck({ ...data, id })
}

const handleCheck = (data: IBookmark) => {
  iframeLoading.value = true
  currentView.value = data
}

const handleClose = (data: IBookmark, index: number) => {
  if (currentView.value?.id === data.id) {
    currentView.value = viewList.value[index + 1]
      ? viewList.value[index + 1]
      : viewList.value[index - 1]
        ? viewList.value[index - 1]
        : {
            name: '',
            icon: '',
            src: ''
          }
  }
  viewList.value = viewList.value.filter((item) => item.id !== data.id)
  if (!viewList.value.length) {
    appId && taskId && runningTasksStore.closeTask(appId, taskId)
  }
}

const handleRefresh = async () => {
  const view = JSON.parse(JSON.stringify(currentView.value))
  currentView.value = {
    name: '',
    icon: '',
    src: ''
  }
  await sleep(100)
  currentView.value = view
}

const handleAddView = () => {
  const data = {
    id: randomWord(20),
    name: '新标签页',
    src: '',
    icon: 'network.png'
  }
  viewList.value.push(data)
  handleCheck(data)
}

const iframeLoad = (data: IBookmark) => {
  data.isLoaded = true
  iframeLoading.value = false
}

onBeforeMount(() => {
  handleCheckBookmark(bookmark[0])
})
</script>

<style scoped lang="scss">
.chrome {
  width: 100%;
  height: 100%;
  background-color: #fff;

  &.ios {
    .chrome-header {
      .tabs-list {
        left: 82px;
      }
    }
  }

  .chrome-header {
    position: relative;
    height: 44px;
    background-color: #000;

    .tabs-list {
      max-width: 75%;
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      overflow-x: auto;
      padding-left: 10px;

      li {
        box-sizing: border-box;
        width: 240px;
        max-width: 240px;
        height: 36px;
        border-radius: 8px 8px 0 0;
        display: flex;
        align-items: center;
        color: #fff;

        &.checked {
          background-color: rgb(45, 45, 45);
        }

        &.add {
          width: auto;

          > span {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-left: 10px;

            &:hover {
              background-color: rgb(40, 40, 40);
            }
          }
        }

        img {
          width: 16px;
          height: 16px;
          object-fit: contain;
          margin-right: 10px;
        }

        p {
          width: calc(100% - 26px * 2);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        span.close {
          margin-left: 10px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 16px;
          height: 16px;
          border-radius: 50%;

          &:hover {
            background-color: rgb(78, 78, 78);
          }
        }
      }
    }
  }

  .tools {
    height: 76px;
    box-sizing: border-box;
    background-color: rgb(45, 45, 45);
    border-bottom: 1px solid rgb(86, 86, 86);
    padding: 5px 0;

    .tools-top {
      height: 34px;
      display: flex;
      align-items: center;

      > span {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 100%;
        color: rgb(122, 122, 122);

        &.ac {
          color: #fff;
        }
      }

      .search {
        width: 70%;
        height: 100%;
        border-radius: 999px;
        background-color: rgb(63, 63, 63);
        display: flex;
        align-items: center;

        .lock {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ccc;
        }

        input {
          width: 100%;
          height: 100%;
          background-color: transparent;
          outline: none;
          color: #fff;
        }
      }
    }

    .tools-bottom {
      padding-left: 10px;
      padding-top: 5px;
      color: #fff;
      height: 30px;
      line-height: 30px;
      display: flex;
      align-items: center;

      li {
        padding: 0 10px;
        border-radius: 4px;
        display: flex;
        align-items: center;

        &:hover {
          background-color: rgb(61, 61, 61);
        }

        img {
          width: 16px;
          height: 16px;
          object-fit: contain;
          margin-right: 10px;
        }
      }
    }
  }

  .chrome-content {
    overflow: hidden;
    width: 100%;
    height: calc(100% - 44px - 76px);
    display: flex;
    justify-content: center;
    align-items: center;

    iframe {
      padding: 0;
      margin: 0;
      outline: none;
      border: none;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
  }
}
</style>
